<template>
  <div class="my-container" @scroll="handleScroll">
    <div class="my-title" :class="{'hidden':Scrolled}">
      <div class="my-headImg">
        <img src="@/assets/img/my_head.png" alt="用户头像" />
      </div>
      <div class="info-part">
      <ul>
        <li class="my-font-name">张包包</li>
        <li class="my-font-Id">小红书号: 777777777</li>
        <li class="my-font-introduction">心怀梦想，脚踏实地，奋斗如晨星，照亮前行之路，绽放生命的璀璨光芒。</li>
        <li class="my-font-fans">112关注 7777粉丝 6666获赞与收藏</li>
      </ul>
    </div>
    </div>

    <nav class="my-nav" :class="{'fix':Scrolled}">
    
      <RouterLink
        v-for="v in myNavlist"
        :key="v.id"
        :to="v.path"
    :class="channel == v ? 'selected' : 'unselected'" 
    @click="channel = v"
      >  
      <div class="nav-item">
      <span  >{{ v.name }}</span>
     </div>
      </RouterLink>
   
    </nav>

    <div class="my-nav-container" >
      <transition name="slide">
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { RouterLink } from "vue-router";

const myNavlist = ref([
  { id: 1, name: "笔记", path: "/myself/note" },  
  { id: 2, name: "收藏", path: "/myself/collection" },
  { id: 3, name: "点赞", path: "/myself/good" },
]);
const channel = ref(myNavlist.value[0]);
const Scrolled =ref(false);
const handleScroll=(event)=>{
  Scrolled.value = event.target.scrolltop > 0;
}

</script>

<style scoped>
span {
  user-select: none; 
  outline: none;
}

.my-font-name{
  font-size: 24px;
  color: #333333;
  font-weight: 600;
}

.my-font-Id{
  font-size: 12px;
  color: #33333399;
}

.my-font-introduction{
  font-size: 14px;
  color: #333333;
}

.my-font-fans{
  display: flex;
  font-size: 14px;
  color: #33333399;
  position: relative;
  margin-top: 25px;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from{
  transform: translateX(100%); 
}
.slide-leave-to{
  transform: translateX(-100%);
}
</style>
